<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
      <el-breadcrumb-item>会员统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">会员增长情况</span>
          <el-row style="text-align: right">
                <el-button size="small">导出数据</el-button>
                <!-- 选择器 -->
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- 日期 -->
                <el-date-picker
                  size="small"
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
           </el-row>
        </div>
      </el-header>
      <el-main>
          <div id="main1" style="width: 1000px;height:400px;margin-left: 35px;"></div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">会员端口来源</span>
          <el-row style="text-align: right">
                <el-button size="small">导出数据</el-button>
                <!-- 选择器 -->
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- 日期 -->
                <el-date-picker
                  size="small"
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
           </el-row>
        </div>
      </el-header>
      <el-main>
          <div id="main2" style="width: 450px;height:450px;margin-left: 355px;"></div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">会员消费金额分布</span>
          <el-row style="text-align: right">
                <el-button size="small">导出数据</el-button>
                <!-- 选择器 -->
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- 日期 -->
                <el-date-picker
                  size="small"
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
           </el-row>
        </div>
      </el-header>
      <el-main>
          <div id="main3" style="width: 1000px;height:400px;margin-left: 35px;"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [],
      value: '',
      value1: ''
    }
  },
  methods: {
    drawview (){
        // 折线图
        const myChart1 = this.$echarts.init(document.getElementById("main1"));
        // 饼状图
        const myChart2 = this.$echarts.init(document.getElementById("main2"));
        // 柱状图
        const myChart3 = this.$echarts.init(document.getElementById("main3"));

        const option1 = {
              // title: {
              //     text: '折线图堆叠'
              // },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '浏览次数',
                      type: 'line',
                      stack: '总量',
                      data: [120, 132, 101, 134, 90, 230, 210]
                  }
              ],
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['浏览次数']
              }
          }
        myChart1.setOption(option1)

        const option2 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart2.setOption(option2)

        const option3 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        myChart3.setOption(option3)

    }
  },
  mounted () {
    this.drawview()
  }
}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>